<template>
    <div class="changepsd">
        <div class="oldpsd">
            <x-Input title="旧密码" v-model="oldpsd.val" :type='oldpsd.type' placeholder="请输入旧密码" :min="6" :max="20" @on-change="changepwd('oldpsd')"></x-Input>
            <i class="icon iconfont" :class="oldpsd.icon" @click="isShow('oldpsd')"></i>
        </div>
        <div class="newpsd">
            <x-Input title="新密码" v-model="newpsd.val" :type='newpsd.type' aria-placeholder="6-20包括字母、数字、特殊字符等至少两种" :min="6" :max="20" @on-change="changepwd('newpsd')"></x-Input>
            <i class="icon iconfont" :class="newpsd.icon" @click="isShow('newpsd')"></i>
        </div>
        <div class="affirm">
            <x-Input title="确认新密码" v-model="afform.val" :type='afform.type' aria-placeholder="确认密码" :min="6" :max="20" @on-change="changepwd('afform')"></x-Input>
            <i class="icon iconfont" :class="afform.icon" @click="isShow('afform')"></i>
        </div>
        <!-- <div class="find f24">忘记密码?</div> -->
        <div class="save">
            <button class="f30" @click="save()">保存</button>
        </div>
    </div>
</template>

<script>
    import { XInput } from 'vux'
    export default {
        name: 'changepsd',
        components: {
            XInput
        },
        data() {
            return {
                title: '密码',
                oldpsd: {
                    val: '',
                    icon: 'icon-yanjing',
                    iconShow: false,
                    type: 'password'
                },
                newpsd: {
                    val: '',
                    icon: 'icon-yanjing',
                    iconShow: false,
                    type: 'password'
                },
                afform: {
                    val: '',
                    icon: 'icon-yanjing',
                    iconShow: false,
                    type: 'password'
                },
                ifCan: false
            }
        },
        methods: {
            acquire(keyName, iconBool) {
                if(keyName == 'oldpsd'){
                    this.oldpsd.iconShow = iconBool;
                }
            },
            isShow(keyName) {
                if(keyName == 'oldpsd'){
                    if(this.oldpsd.icon == 'icon-yanjing'){
                        this.oldpsd.icon = 'icon-faxiantianchong'
                        this.oldpsd.type = 'text'
                    } else {
                        this.oldpsd.icon = 'icon-yanjing'
                        this.oldpsd.type = 'password'
                    }
                }else if(keyName == 'newpsd'){
                    if(this.newpsd.icon == 'icon-yanjing'){
                        this.newpsd.icon = 'icon-faxiantianchong'
                        this.newpsd.type = 'text'
                    } else {
                        this.newpsd.icon = 'icon-yanjing'
                        this.newpsd.type = 'password'
                    }
                }else if(keyName == 'afform'){
                    if(this.afform.icon == 'icon-yanjing'){
                        this.afform.icon = 'icon-faxiantianchong'
                        this.afform.type = 'text'
                    } else {
                        this.afform.icon = 'icon-yanjing'
                        this.afform.type = 'password'
                    }
                }
            },
            changepwd(keyval) {
                var str = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?\.]+)$)^[\w~!@#$%^&*?\.]{6,20}$/
                if(keyval == 'oldpsd'){
                    // this.oldpsd.val.replace(/[\u4e00-\u9fa5]/ig,'')
                    if(!this.oldpsd.val.match(str)){
                        this.oldpsd.val = ''
                    }
                }else if(keyval == 'newpsd'){
                    if(!this.newpsd.val.match(str)){
                        this.newpsd.val = ''
                    }
                }else if(keyval == 'afform'){
                    if(this.afform.val == this.newpsd.val){
                        this.ifCan = true
                    } else {
                        this.ifCan = false
                    }
                    if(!this.afform.val.match(str)){
                        this.afform.val = ''
                    }
                }
            },
            save() {
                if(this.ifCan) {
                    let params = {
                        userId: this.$store.state.userId,
                        oldPass: this.oldpsd.val,
                        newPass: this.newpsd.val
                    }
                    this.$http.fetchGet('editPass', params).then(res => {
                        if(res.code == 200){
                            this.$vux.toast.text(res.msg)
                        }
                        this.$router.push({
                            path: '/safety'
                        })
                    }, err => {

                    })
                } else {
                    this.$vux.toast.text(res.msg)
                }
            }
        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .changepsd{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .oldpsd, .newpsd, .affirm{
            position: relative;
            width: 100%;
            background: #fff;
            border-bottom: 1px solid #f2f2f2;
            .pr(60);
            box-sizing: border-box;
            i{
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .find{
            .h(88);
            .lh(88);
            width: 100%;
            text-align: right;
            box-sizing: border-box;
            color: #666;
            .padd(0, 20);
        }
        .save{
            width: 100%;
            .padd(0, 20);
            box-sizing: border-box;
            margin-top: 50%;
            button{
                width: 100%;
                .h(88);
                border: none;
                background: #189BEB;
                border-radius: 10px;
                color: #fff;
            }
        }
    }
</style>
